<template>
  <div class="friend-info">
    <div class="avatar-wrapper">
      <el-avatar :size="40" :src="avatarUrl || defaultAvatar" class="friend-avatar" />
    </div>
    <div class="friend-detail">
      <div class="name-section">
        <el-tooltip :content="userName || '-'" placement="top" :disabled="!shouldShowNameTooltip">
          <span ref="nameRef" class="name">{{ userName ? userName : '-' }}</span>
        </el-tooltip>
      </div>
      <div class="wxid-section">
        <el-tooltip :content="wxId || ' '" placement="top" :disabled="!shouldShowWxIdTooltip">
          <span ref="wxIdRef" class="value">{{ wxId ? wxId : ' ' }}</span>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import defaultAvatar from '@/assets/avatar.jpg';

export default defineComponent({
  name: 'AiWechatInfo',

  props: {
    avatarUrl: {
      type: String,
      required: false,
      default: ''
    },
    userName: {
      type: String,
      required: true
    },
    wxId: {
      type: String,
      required: true
    }
  },

  setup(props) {
    const nameRef = ref<HTMLElement>();
    const wxIdRef = ref<HTMLElement>();

    const shouldShowNameTooltip = computed(() => {
      if (!props.userName || props.userName === '-') return false;
      return props.userName.length > 8; // 简单的长度判断
    });

    const shouldShowWxIdTooltip = computed(() => {
      if (!props.wxId || props.wxId === '-') return false;
      return props.wxId.length > 12; // 简单的长度判断
    });

    return {
      defaultAvatar,
      nameRef,
      wxIdRef,
      shouldShowNameTooltip,
      shouldShowWxIdTooltip
    };
  }
});
</script>

<style lang="scss" scoped>
.friend-info {
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  width: 70%;
  margin: auto;
  .avatar-wrapper {
    margin-right: 20px;

    .friend-avatar {
      border: 1px solid #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease;

      &:hover {
        transform: scale(1.03);
      }
    }
  }

  .friend-detail {
    flex: 1;
    min-width: 0;
    text-align: left;
    .name-section {
      .name {
        font-size: 15px;
        font-weight: 600;
        color: #2c3e50;
        line-height: 1.3;
        transition: color 0.3s ease;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;

        &:hover {
          color: #409eff;
        }
      }
    }

    .wxid-section {
      display: flex;
      align-items: center;
      gap: 6px;

      .label {
        font-size: 12px;
        color: #909399;
        padding: 2px 6px;
        background: #f5f7fa;
        border-radius: 4px;
        transition: all 0.3s ease;

        &:hover {
          background: #ecf5ff;
          color: #409eff;
        }
      }

      .value {
        font-size: 12px;
        color: #606266;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.3s ease;

        &:hover {
          color: #409eff;
        }
      }
    }
  }
}
</style>
